<template>
    <div id="home">
      <nav-bar class="home-nav">
        <div slot="center">购物街</div>
      </nav-bar>
      <tab-control class="tab-control" :titles="titles" @tab-click="tabClick"
                   ref="tabControl2" v-show="isTabFixed" />

      <scroll class="content" ref="scroller"
        :pull-up-load="true" @pull-up='pullUp' @scroll='scroll'>
        <div v-if="banner && banner.list.length > 0">
          <home-swiper :banners="banner.list"></home-swiper>
        </div>
        <home-recommend v-if="recommend && recommend.list.length > 0" :list="recommend.list" />
        <feature-view />
        <tab-control class="tab-control" :titles="titles" @tab-click="tabClick"
                     ref="tabControl1" v-show="!isTabFixed" />
        <goods-list :goods="showGoods" />
      </scroll>

      <back-top v-show="this.isShowBackTop" @click.native="back2Top" />
    </div>
</template>

<script>
  import {types} from 'common/const'
  import {debounce} from "common/utils"

  import {backTopMixin} from 'common/mixin'

  import NavBar from 'components/common/navbar/NavBar'
  import HomeSwiper from 'components/context/HomeSwiper'
  import HomeRecommend from 'components/context/HomeRecommend'
  import FeatureView from 'components/context/FeatureView'
  import GoodsList from "components/context/goods/GoodsList"
  import Scroll from 'components/common/scroll/Scroll'

  import TabControl from 'components/common/tabcontrol/TabControl'

  import {
    getHomeMultiData,
    getHomeGoods
  } from 'network/home'

  export default {
    name: "Home",
    components: {
      NavBar, HomeSwiper, HomeRecommend,FeatureView, TabControl, GoodsList, Scroll
    },
    data: () => ({
      banner: null,
      recommend: null,
      goods: {
        'pop': {
          // 流行
          page: 1,
          list: []
        },
        'new': {
          // 新款
          page: 1,
          list: []
        },
        'sell': {
          // 热门
          page: 1,
          list: []
        }
      },
      currentType: 'pop',
      position: undefined,
      tabOffsetTop: 0,
      saveY: undefined,
      get isTabFixed() {
        return this.position && -this.position.y > this.tabOffsetTop;
      }
    }),
    mixins: [backTopMixin],
    computed: {
      showGoods() {
        return this.goods[this.currentType].list;
      },
      titles() {
        return Object.keys(types);
      }
    },
    created() {
      this.$bus.$on('swiper-image-load', () => {
        // 获取offsetTop进行吸顶操作
        // 获取tabControl的offsetTop(所有的组件都有一个属性$el:用于获取组件中的元素)
        this.tabOffsetTop = this.$refs.tabControl1.$el.offsetTop;
        console.debug('offsetTop = ', this.tabOffsetTop);
      });
    },
    mounted() {
      // 封装轮播图
      getHomeMultiData().then(multidata => {
        this.banner = multidata.data.banner;
        this.recommend = multidata.data.recommend;
      });

      // 请求数据
      Promise.all([this.getHomeGoods('pop'),
      this.getHomeGoods('sell'),
      this.getHomeGoods('new')]).then(() => {
        // this.$refs.scroller.bs.refresh(); // observeDOM 帮助完成该操作
      });
    },
    activated() {
      if (this.saveY) {
        while (Math.abs(this.position.y - this.saveY) >= 1) {
          // console.debug('尝试从', this.position.y, '滚动到', this.saveY);
          this.$refs.scroller.bs.refresh(); // 帮助刷新出图片的高度, 再进行滚动
          this.$refs.scroller.scrollTo(this.position.x, this.saveY, 0);
        }
      }
    },
    deactivated() {
      this.saveY = this.$refs.scroller.getScrollY();
    },
    methods: {
      /**
       * 获取指定类型商品
       * @param type
       */
      getHomeGoods(type) {
        return getHomeGoods(type, this.goods[type].page).then(goods => {
          this.goods[type].list.push(...goods.data.list);
          this.goods[type].page++;
          Promise.resolve(goods);
        });
      },
      tabClick(title) {
        this.currentType = types[title];

        this.$refs.tabControl1.itemClick(title);
        this.$refs.tabControl2.itemClick(title);
      },
      /**
       * 上拉到底部, 获取下一页
       **/
      pullUp() {
        console.debug('上拉加载更多...');
        debounce(this.getHomeGoods(this.currentType).then(() => {
          // this.$refs.scroller.bs.refresh(); // observeDOM 属性帮助完成该操作
          this.$refs.scroller.finishPullUp();
        }), 1000);
      },
      scroll(position) {
        this.position = position;
        this.isShowBackTop = position.y < -1000;
      }
    }
  }
</script>

<style scoped>
  @import "~assets/css/base.css";

  #home {
    padding-top: 44px;
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .tab-control {
    /*position: sticky;*/ /* Better-Scroll 使吸顶无效 */
    position: relative;
    /*top: 44px; /* 顶部navbar的高度 */
    /* z-index: 9; */
  }

  .content {
    height: calc(100% - 93px);
    overflow: hidden;
    position: absolute;
    /* top: 44px; */
    /* bottom: 49px; */
    /* left: 0; */
    /* right: 0; */
  }
</style>
